<template>
  <div>
    <div class="jumbotron">
        <router-link to="/">
        <div class="iconfont">&#xe62c;</div>
        </router-link>
        <img :src="school.icon_url">
        <h6 class="display-5">{{school.school_name}}</h6>
        <span class="lead">{{school.school_produce}}</span>
        <hr class="my-4">
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
          一流学科建设
        </a>
        <div class="collapse" id="collapseExample">
        <div class="card card-body">
         {{school.subjects_list}}
        </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JumBotron',
  props: {
    list: Array,
    schoolname: String
  },
  data () {
    return {
    }
  },
  // methods: {
  //   getshowschool () {
  //     this.list.forEach(raw => {
  //       if (raw.school_name === this.schoolname) {
  //         this.showschool = raw
  //       }
  //     })
  //   }
  // },
  computed: {
    school () {
      var school = {}
      this.list.forEach(raw => {
        if (raw.school_name === this.schoolname) {
          school = raw
        }
      })
      return school
    }
  }
}
</script>

<style scoped>
.jumbotron{
    font-size: 30px;
}
.lead{
    font-size: 20px;
}
.btn{
    font-size: 30px;
}
.iconfont{
  font-size: 40px;
  margin-left:15px;
  position:absolute;
  top: 0;
  left: 10px
}
.card{
  font-size: 20px;
}
</style>>
